<template>
  <div class="xq-form-wrapper">
    <div class="xq-form-search">
      <a-input-search allowClear v-model="empName" placeholder="姓名/身份证" class="mr12" style="width: 200px" @search="handleChange" />
      <a-select allowClear class="mr12" style="width: 200px" placeholder="招工企业" v-model="companyUnitName" @change="handleChange">
        <a-select-option :value="item.name" v-for="item in companyIdArr" :key="item.id">
          {{ item.name }}
        </a-select-option>
      </a-select>
      <a-select v-model="settlementStatus" allowClear style="width: 200px" placeholder="是否核算" @change="handleChange">
        <a-select-option value="1"> 是 </a-select-option>
        <a-select-option value="0"> 否 </a-select-option>
      </a-select>
    </div>
    <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
      <XqTable
        :customize="FormJson['config']['table']['customize']"
        :scroll="{ x: columns.length * 150 }"
        :pagination="false"
        :dataSource="tableData"
        :columns="columns"
        :row-selection="
          FormJson['config']['table']['extend']['batch']
            ? {
                selectedRowKeys: selectedRowKeys,
                onChange: onSelectChange
              }
            : null
        "
        class="xq-form-content-table"
        @change="onTableChange"
      >
        <!-- 主要内容，表格，自定义 header -->
        <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
          <span :key="index">
            {{ col.customTitle }}
          </span>
        </template>
        <!-- 主要内容，表格，自定义 td -->
        <!-- eslint-disable-next-line prettier/prettier -->
        <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
          <span v-if="col.dataIndex === 'empName'" :key="index"> {{ text }} </span>
          <span v-else-if="col.dataIndex === 'jobSeekerName'" :key="index" style="color: #6a66f6">
            {{ text }}
          </span>
          <span v-else-if="col.dataIndex === 'settlementStatus'" :key="index">
            <div v-if="text === 1"><span class="d1"></span> 已核算</div>
            <div v-if="text === 0"><span class="d2"></span> 未核算</div>
          </span>
          <span v-else-if="col.dataIndex === 'moneyCount'" :key="index"> ￥{{ text }} </span>
          <span v-else-if="col.dataIndex === 'grantDate'" :key="index">
            {{ text ? moment(text).format("YYYY-MM-DD") : "" }}
          </span>
          <span v-else-if="col.dataIndex === 'tableAction'" :key="index">
            <a @click="onEdit(record)">编辑</a>
          </span>
          <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
        </template>
      </XqTable>
      <div class="xq-form-content-pagination">
        <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
        <a-pagination
          v-model="pageNo"
          :page-size="pageSize"
          :total="total"
          :show-size-changer="true"
          :show-quick-jumper="true"
          :page-size-options="['10', '20', '50', '100']"
          @change="onPageChange"
          @showSizeChange="onPageSizeChange"
        />
      </div>
    </a-spin>
    <edit :info="info" :visible.sync="visible" @upDate="upDate" />
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getBrokerPageById, getCompanyUnits } from "./api";
import edit from "./component/edit";
import moment from "moment";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  components: {
    edit
  },
  mixins: [curdMixin],
  data() {
    return {
      numArr: [
        { type: "1", name: "已投递总人数", num: 0 },
        { type: "1", name: "已入职总人数", num: 0 },
        { type: "2", name: "经纪人总数", num: 0 },
        { type: "3", name: "已投递职位数", num: 0 },
        { type: "4", name: "今日投递人数", num: 0 }
      ],
      previewImage: "",
      previewVisible: false,
      logo: [],
      fileList: [],
      id: "",
      form: this.$form.createForm(this, {}),
      value: "",
      socCity: "",
      socCityName: "",
      mType: true,
      visible: false,
      visibleMsg: false,
      spinning: false,
      tableData: [],
      empName: "",
      companyUnitName: undefined,
      settlementStatus: undefined,
      total: 0,
      pageNo: 1,
      pageSize: 20,
      info: {},
      companyIdArr: []
    };
  },
  created() {
    this.onGetBrokerPageById();
    this.onGetCompanyUnits();
  },
  methods: {
    moment,
    async onGetCompanyUnits() {
      try {
        const { data } = await getCompanyUnits({
          pageNo: 1,
          pageSize: 1000
        });
        this.companyIdArr = data.entities;
      } catch (err) {
        console.log("error log --> ", err);
      }
    },
    async onGetBrokerPageById() {
      try {
        this.spinning = true;
        const { data } = await getBrokerPageById({
          settlementStatus: this.settlementStatus || "",
          companyUnitName: this.companyUnitName || "",
          empName: this.empName,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetBrokerPageById();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetBrokerPageById();
    },
    onShowModal() {
      this.mType = true;
      this.visible = true;
      this.form.resetFields();
    },
    handleCity(e) {
      if (e.value.length > 0) {
        const value = e.value;
        const label = e.label;
        this.socCity = value[value.length - 1].toString();
        if (label.length && label.length === 3) {
          this.socCityName = label[0] + "/" + label[1] + "/" + label[2];
        } else if (label.length && label.length === 2) {
          this.socCityName = label[0] + "/" + label[1];
        }
      } else {
        this.socCity = "";
        this.socCityName = "";
      }
    },
    handleChange() {
      this.pageNo = 1;
      this.onGetBrokerPageById();
    },
    upDate() {
      this.onGetBrokerPageById();
      this.visible = false;
    },
    onEdit(e) {
      this.info = e;
      this.visible = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.r-msg-status {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #e8e8e8;
  margin-top: 20px;
  margin-bottom: 24px;
  .s-item {
    width: 25%;
    box-sizing: border-box;
    padding-top: 24px;
    padding-left: 24px;
    position: relative;
    .s-item-t {
      color: #767885;
    }
    .s-item-b {
      font-size: 24px;
      font-weight: bold;
      color: #55565d;
    }
    .s-item-line {
      position: absolute;
      top: 32px;
      right: 0;
      width: 1px;
      height: 36px;
      background: #e8e8e8;
    }
  }
}
.avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.d1 {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #4686ff;
  border-radius: 50%;
}
.d2 {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffbb00;
}
</style>
